<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约挂号系统</title>

    <!-- CDN资源 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-icons.min.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>

    <!-- 自定义样式 -->
    <style>
        .department-card {
            transition: transform 0.2s;
            border-left: 4px solid #0d6efd;
        }
        .department-card:hover {
            transform: translateX(5px);
        }
        .stretched-link::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            content: "";
            pointer-events: auto;
        }
        .loading-spinner {
            width: 1.2em;
            height: 1.2em;
            border-width: 0.2em;
        }
    </style>
</head>
<body>
<h1 class="text-center my-4">预约挂号系统</h1>

<div class="container mt-5">
    <!-- 查询按钮 -->
    <div class="d-grid gap-3 mb-4">
        <button id="getDeptBtn" class="btn btn-primary btn-lg">
            <i class="bi bi-search me-2"></i>查询所有科室
        </button>
    </div>

    <!-- 科室列表 -->
    <ul id="departmentList" class="list-group list-group-flush shadow-sm rounded">
        <!-- 动态内容 -->
    </ul>
</div>

<div class="container mt-5">
    <div class="d-grid gap-3 mb-4">
        <button id="getDeptBtn1" class="btn btn-primary btn-lg">
            <a th:href="@{/appointment}" class="btn btn-primary"><i class="bi bi-search me-2"></i>查看候诊</a>
        </button>
    </div>


</div>

<script>
    $(document).ready(function() {
        // 独立封装渲染函数
        function renderDepartmentList(data) {
            const list = $('#departmentList');
            list.empty();

            if (!data || data.length === 0) {
                list.append(`
                        <li class="list-group-item text-center text-muted py-5">
                            <i class="bi bi-exclamation-circle fs-3 d-block mb-2"></i>
                            暂无科室数据
                        </li>
                    `);
                return;
            }

            $.each(data, function(index, dept) {
                console.log(dept);
                list.append(`
                        <li class="list-group-item position-relative department-card p-3 cursor-pointer"
                            data-href="users/doctors?departmentId=${dept.id}">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-building fs-4 me-3 text-primary"></i>
                                <div class="flex-grow-1">
                                    <div class="fw-bold fs-5">${dept.name}</div>
                                    <small class="text-muted">科室ID: ${dept.id}</small>
                                </div>
                                <i class="bi bi-arrow-right-circle-fill fs-5 text-secondary"></i>
                            </div>
                        </li>
                    `);
            });
        }

        // 初始化科室列表
        $('#getDeptBtn').on('click', function() {
            const btn = $(this);
            const originalText = btn.html();

            // 添加加载状态
            btn.html(`
                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                    加载中...
                `).prop('disabled', true);

            $.get('/users/getAllDepartment')
                .done(function(data) {
                    console.log('科室数据:', data);
                    renderDepartmentList(data);
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    console.error('获取失败:', {
                        status: jqXHR.status,
                        response: jqXHR.responseText
                    });

                    $('#departmentList').html(`
                            <li class="list-group-item text-center text-danger py-5">
                                <i class="bi bi-cloud-slash fs-3 d-block mb-2"></i>
                                数据加载失败<br>
                                <small>请检查网络连接或稍后重试</small>
                            </li>
                        `);
                })
                .always(function() {
                    btn.html(originalText).prop('disabled', false);
                });
        });

        // 点击事件处理
        $(document).on('click', '.department-card', function() {
            const href = $(this).data('href');
            if (href) {
                console.log('跳转到:', href); // 输出跳转链接，调试用
                window.location.href = href;  // 跳转到 doctor.html 页面
            } else {
                console.error('data-href 属性为空，无法跳转');
            }
        });

        // 页面加载自动触发一次查询
        $('#getDeptBtn').trigger('click');
    });
</script>
</body>
</html>